<template>
	<view>
		<view class="components">
			<view class="head">
				<view class="title">
					<view class="title_line"></view>
					<text class="title_text">订单数量增长量</text>
				</view>
			</view>
			<view class="line">
				<l-echart ref="chartLineNum" />
			</view>
		</view>
		<view class="components">
			<view class="head">
				<view class="title">
					<view class="title_line"></view>
					<text class="title_text">订单金额增长量</text>
				</view>
			</view>
			<view class="line">
				<l-echart ref="chartLineOrder" />
			</view>
		</view>
		<view class="components">
			<view class="head">
				<view class="title">
					<view class="title_line"></view>
					<text class="title_text">权益卡激活增长量</text>
				</view>
			</view>
			<view class="line">
				<l-echart ref="chartLineCard" />
			</view>
		</view>
		<view class="components">
			<view class="head">
				<view class="title">
					<view class="title_line"></view>
					<text class="title_text">业务员月增长量</text>
				</view>
			</view>
			<view class="line">
				<l-echart ref="chartLine1" />
			</view>
		</view>
		<view class="components">
			<view class="head">
				<view class="title">
					<view class="title_line"></view>
					<text class="title_text">客户月增长量</text>
				</view>
			</view>
			<view class="line">
				<l-echart ref="chartLine" />
			</view>
		</view>
	</view>
</template>

<script>
	import * as echarts from "../components/lime-echart/static/echarts.min.js";
	import lEchart from "../components/lime-echart/components/l-echart/l-echart.vue"
	import {
		queryNewSalesmanNum,
		queryNewCustomerNum,
		queryNewCardNum,
		queryNewOrderNum
	} from '@/api/operate.js'

	export default {
		components: {
			lEchart
		},
		data() {
			return {
				currentFilterDate: {
					text: '最近1年',
					value: 12,
					type: 'months'
				},
				
				optionLine: {
					title: {
						text: "单位/人", // 使用富文本格式
						textAlign: "left",
						top: "6%",
						textStyle: {
							width: uni.upx2px(644),
							color: "#86909C",
							fontSize: uni.upx2px(20),
						},
					},
					tooltip: {
						show: true,
						trigger: "axis",
						position: "top",
					},
					formatter: "{b}：{c}人",
					xAxis: {
						data: [],
						type: "category",
						boundaryGap: false,
						axisTick: {
							show: false,
						},
						axisLabel: {
							fontSize: uni.upx2px(16),
							color: "#86909C",
							rotate: 40,
						},
					},
					yAxis: {
						type: "value",
						axisLabel: {
							fontSize: uni.upx2px(20),
							color: "#86909C",
						},
						min: 0,
						// interval: 1000,
						// splitNumber: 5,
						splitLine: {
							show: true,
							lineStyle: {
								type: "dashed",
								color: "#E5E6EB",
							},
						},
					},
					grid: {
						top: "24%",
						left: "12%",
						right: "4%",
						bottom: "20%",
					},
					series: [{
						symbol: "none",
						data: [],
						type: "line",
						lineStyle: {
							color: "#165DFF",
						},
						areaStyle: {
							color: new echarts.graphic.LinearGradient(
								0,
								0,
								0,
								1, // 渐变方向
								[{
										offset: 0,
										color: "rgba(22, 93, 255, 0.20)"
									}, // 渐变起始色
									{
										offset: 1,
										color: "rgba(22, 93, 255, 0)"
									}, // 渐变结束色，透明
								]
							),
						},
					}, ],
				},
				optionLine1: {
					title: {
						text: "单位/人", // 使用富文本格式
						textAlign: "left",
						top: "6%",
						textStyle: {
							width: uni.upx2px(644),
							color: "#86909C",
							fontSize: uni.upx2px(20),
						},
					},
					tooltip: {
						show: true,
						trigger: "axis",
						position: "top",
					},
					formatter: "{b}：{c}人",
					xAxis: {
						data: [],
						type: "category",
						boundaryGap: false,
						axisTick: {
							show: false,
						},
						axisLabel: {
							fontSize: uni.upx2px(16),
							color: "#86909C",
							rotate: 40,
						},
					},
					yAxis: {
						type: "value",
						axisLabel: {
							fontSize: uni.upx2px(20),
							color: "#86909C",
						},
						min: 0,
						// interval: 1000,
						// splitNumber: 5,
						splitLine: {
							show: true,
							lineStyle: {
								type: "dashed",
								color: "#E5E6EB",
							},
						},
					},
					grid: {
						top: "24%",
						left: "12%",
						right: "4%",
						bottom: "20%",
					},
					series: [{
						symbol: "none",
						data: [],
						type: "line",
						lineStyle: {
							color: "#165DFF",
						},
						areaStyle: {
							color: new echarts.graphic.LinearGradient(
								0,
								0,
								0,
								1, // 渐变方向
								[{
										offset: 0,
										color: "rgba(22, 93, 255, 0.20)"
									}, // 渐变起始色
									{
										offset: 1,
										color: "rgba(22, 93, 255, 0)"
									}, // 渐变结束色，透明
								]
							),
						},
					}, ],
				},
				optionLineOrder: {
					title: {
						text: "单位/元", // 使用富文本格式
						textAlign: "left",
						top: "6%",
						textStyle: {
							width: uni.upx2px(644),
							color: "#86909C",
							fontSize: uni.upx2px(20),
						},
					},
					tooltip: {
						show: true,
						trigger: "axis",
						position: "top",
					},
					formatter: "{b}：{c}元",
					xAxis: {
						data: [],
						type: "category",
						boundaryGap: false,
						axisTick: {
							show: false,
						},
						axisLabel: {
							fontSize: uni.upx2px(16),
							color: "#86909C",
							rotate: 40,
						},
					},
					yAxis: {
						type: "value",
						axisLabel: {
							fontSize: uni.upx2px(20),
							color: "#86909C",
						},
						min: 0,
						// interval: 80000,
						// splitNumber: 5,
						splitLine: {
							show: true,
							lineStyle: {
								type: "dashed",
								color: "#E5E6EB",
							},
						},
					},
					grid: {
						top: "24%",
						left: "14%",
						right: "4%",
						bottom: "20%",
					},
					series: [{
						symbol: "none",
						data: [],
						type: "line",
						lineStyle: {
							color: "#17cf36",
						},
						areaStyle: {
							color: new echarts.graphic.LinearGradient(
								0,
								0,
								0,
								1, // 渐变方向
								[{
										offset: 0,
										color: "rgba(24, 255, 62, 0.2)"
									}, // 渐变起始色
									{
										offset: 1,
										color: "rgba(74, 255, 71, 0.0)"
									}, // 渐变结束色，透明
								]
							),
						},
					}, ],
				},
				optionLineNum: {
					title: {
						text: "单位/单", // 使用富文本格式
						textAlign: "left",
						top: "6%",
						textStyle: {
							width: uni.upx2px(644),
							color: "#86909C",
							fontSize: uni.upx2px(20),
						},
					},
					tooltip: {
						show: true,
						trigger: "axis",
						position: "top",
					},
					formatter: "{b}：{c}单",
					xAxis: {
						data: [],
						type: "category",
						boundaryGap: false,
						axisTick: {
							show: false,
						},
						axisLabel: {
							fontSize: uni.upx2px(16),
							color: "#86909C",
							rotate: 40,
						},
					},
					yAxis: {
						type: "value",
						axisLabel: {
							fontSize: uni.upx2px(20),
							color: "#86909C",
						},
						min: 0,
						// interval: 50,
						// splitNumber: 5,
						splitLine: {
							show: true,
							lineStyle: {
								type: "dashed",
								color: "#E5E6EB",
							},
						},
					},
					grid: {
						top: "24%",
						left: "12%",
						right: "4%",
						bottom: "20%",
					},
					series: [{
						symbol: "none",
						data: [],
						type: "line",
						lineStyle: {
							color: "#17cf36",
						},
						areaStyle: {
							color: new echarts.graphic.LinearGradient(
								0,
								0,
								0,
								1, // 渐变方向
								[{
										offset: 0,
										color: "rgba(24, 255, 62, 0.2)"
									}, // 渐变起始色
									{
										offset: 1,
										color: "rgba(74, 255, 71, 0.0)"
									}, // 渐变结束色，透明
								]
							),
						},
					}, ],
				},
				optionLineCard: {
					title: {
						text: "单位/人", // 使用富文本格式
						textAlign: "left",
						top: "6%",
						textStyle: {
							width: uni.upx2px(644),
							color: "#86909C",
							fontSize: uni.upx2px(20),
						},
					},
					tooltip: {
						show: true,
						trigger: "axis",
						position: "top",
					},
					formatter: "{b}：{c}人",
					xAxis: {
						data: [],
						type: "category",
						boundaryGap: false,
						axisTick: {
							show: false,
						},
						axisLabel: {
							fontSize: uni.upx2px(16),
							color: "#86909C",
							rotate: 40,
						},
					},
					yAxis: {
						type: "value",
						axisLabel: {
							fontSize: uni.upx2px(20),
							color: "#86909C",
						},
						min: 0,
						// interval: 2000,
						// splitNumber: 5,
						splitLine: {
							show: true,
							lineStyle: {
								type: "dashed",
								color: "#E5E6EB",
							},
						},
					},
					grid: {
						top: "24%",
						left: "12%",
						right: "4%",
						bottom: "20%",
					},
					series: [{
						symbol: "none",
						data: [],
						type: "line",
						lineStyle: {
							color: "#cf18c0",
						},
						areaStyle: {
							color: new echarts.graphic.LinearGradient(
								0,
								0,
								0,
								1, // 渐变方向
								[{
										offset: 0,
										color: "rgba(236, 20, 255, 0.2)"
									}, // 渐变起始色
									{
										offset: 1,
										color: "rgba(240, 73, 255, 0.0)"
									}, // 渐变结束色，透明
								]
							),
						},
					}, ],
				},
			}
		},
		methods: {
			getDate(n, type) {
				// 获取当前日期
				const currentDate = this.$moment();

				// 计算n个月前的日期
				const twelveMonthsAgo = this.$moment(currentDate).subtract(n, type);

				// 获取12个月的开始时间（即12个月前的今天的00:00:00）
				const startDate = twelveMonthsAgo
					.startOf("day")
					.format("YYYY-MM-DD HH:mm:ss");

				// 获取整整12个月的结束时间（即当前时间的23:59:59）
				const endDate = currentDate.endOf("day").format("YYYY-MM-DD HH:mm:ss");
				return {
					startDate,
					endDate
				}
			},
			getParams(currentFilterData) {
				return {
					resultType: currentFilterData.type === 'months' ? 'mouth' : 'day',
					analyzeBegin: this.getDate(currentFilterData.value, currentFilterData.type).startDate,
					analyzeEnd: this.getDate(currentFilterData.value, currentFilterData.type).endDate,
					id: this.$store.getters.userInfo.id
				}
			},
			// 获取折线图数据
			async getLineData(params) {
				const result = await queryNewCustomerNum(params);
				this.optionLine.series[0].data = result.data.map((item) => {
					return item.statisticalResult;
				});
				this.optionLine.xAxis.data = result.data.map((item) => {
					return item.statisticalItem;
				});
			},
			// 业务员
			async getLineData1(params) {
				const result = await queryNewSalesmanNum(params);
				this.optionLine1.series[0].data = result.data.map((item) => {
					return item.statisticalResult;
				});
				this.optionLine1.xAxis.data = result.data.map((item) => {
					return item.statisticalItem;
				});
			},
			// 卡
			async getLineDataCard(params) {
				const result = await queryNewCardNum(params);
				this.optionLineCard.series[0].data = result.data.map((item) => {
					return item.statisticalResult;
				});
				this.optionLineCard.xAxis.data = result.data.map((item) => {
					return item.statisticalItem;
				});
			},
			// 订单
			async getLineDataOrder(params) {
				const result = await queryNewOrderNum(params);
				this.optionLineOrder.series[0].data = result.data.map((item) => {
					return item.statisticalTwoResult.split('.')[0];
				});
				this.optionLineOrder.xAxis.data = result.data.map((item) => {
					return item.statisticalItem;
				});
			},
			// 数量
			async getLineDataNum(params) {
				const result = await queryNewOrderNum(params);
				this.optionLineNum.series[0].data = result.data.map((item) => {
					return item.statisticalResult;
				});
				this.optionLineNum.xAxis.data = result.data.map((item) => {
					return item.statisticalItem;
				});
			},
		},
		mounted() {
			const that = this;
			const paramsLine = this.getParams(this.currentFilterDate)
			this.getLineData(paramsLine).then(() => {
				that.$refs.chartLine.init(echarts, (chart) => {
					chart.setOption(that.optionLine);
				});
			})
			this.getLineData1(paramsLine).then(() => {
				that.$refs.chartLine1.init(echarts, (chart) => {
					chart.setOption(that.optionLine1);
				});
			})
			this.getLineDataCard(paramsLine).then(() => {
				that.$refs.chartLineCard.init(echarts, (chart) => {
					chart.setOption(that.optionLineCard);
				});
			})
			this.getLineDataOrder(paramsLine).then(() => {
				that.$refs.chartLineOrder.init(echarts, (chart) => {
					chart.setOption(that.optionLineOrder);
				});
			})
			this.getLineDataNum(paramsLine).then(() => {
				that.$refs.chartLineNum.init(echarts, (chart) => {
					chart.setOption(that.optionLineNum);
				});
			})
		}
	}
</script>

<style>
	page {
		background: #F6F9FF !important;
		padding: 32rpx 28rpx;
		box-sizing: border-box;
	}
</style>

<style lang="scss" scoped>
	.title {
		display: flex;
		align-items: center;

		&_line {
			width: 8rpx;
			height: 28rpx;
			border-radius: 200rpx;
			background-color: #588bf3;
			margin-right: 20rpx;
		}

		&_text {
			font-weight: bold;
			color: #333;
			font-size: 28rpx;
		}
	}

	.components {
		width: 100%;
		height: auto;
		background-color: #fff;
		border-radius: 20rpx;
		margin: 0 auto;
		margin-top: 24rpx;
		padding: 32rpx 28rpx;

		.head {
			display: flex;
			align-items: center;
			justify-content: space-between;
			align-items: center;
		}

		.line {
			width: 100%;
			height: 320rpx;
			margin-top: 20rpx;
		}

		.canvas {
			width: 100%;
			height: 100%;
		}
	}
</style>
